<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>同城论坛</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
	<link href="../../css/city/reset.css" rel="stylesheet" />
	<link href="../../css/city/tribune.css" rel="stylesheet" />
	<script src="../../js/statistics.js"></script>
	<style>
		.list_{
			position: relative;
			top:0;
			width: 100%;
			height: 37vw;
			overflow: hidden;
			color:#ffffff;
			text-align: center;
		}

		.list_ img{
			width: 100%;
			height: 37vw;
		}
		.list_ .text{
			position: absolute;
			top:0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.35);
		}
		.list_ .interest{
			display: inline-block;
			width: 100%;
			font-size: 2.6rem;
			margin-top: 45px;
			margin-bottom: 10px;
		}
		.list_ .description{
			position: relative;
			top:0;
			display: inline-block;
			font-size: 1.4rem;
		}
		.list_ .description:before{
			position: absolute;
			top:45%;
			left: -68px;
			content: '';
			width: 60px;
			height: 1px;
			background: #ffffff;
		}
		.list_ .description:after{
			position: absolute;
			top:45%;
			right: -68px;
			content: '';
			width: 60px;
			height: 1px;
			background: #ffffff;
		}
		.no{
			display: none;
			width: 100%;
			/*height: calc( 100vh - 130px);*/
			text-align: center;
		}
		.nomsg{
			display: inline-block;
			width: 161px;
			height: 129px;
			/*margin-top: 25vh;*/
			/*margin-left: calc( 50vw - 161px);*/
		}
	</style>
</head>
<body>
	<!--下拉刷新容器-->
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<!--数据列表-->
			<div class="mui-table-view mui-table-view-chevron">
				<div class="banner"></div>
				<div class="lists">
				</div>
				<div class="no"></div>
				<input type="hidden" class="update_time">
			</div>
		</div>
	</div>
	<script src="../../plugins/mui/mui.min.js"></script>
	<script src="../../js/getApiToken.js"></script>
	<script src="../../js/md5.js"></script>
	<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
	<script>
	mui.init({
		pullRefresh: {
			container: '#pullrefresh',
			down: {
				contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
				contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
				contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
				callback: function(){
//					setTimeout(function() {
						var user_id = plus.storage.getItem('cg_user_id');
						var user_token = plus.storage.getItem('cg_user_token');
						var type = plus.storage.getItem('city_type');
						$('.lists' ).empty();
						var data = {
//							'api_token': '8a2da8a2e00394f427caf215e90e0e71',
							'page_cnt': 6,
							'user_id':user_id,
							'user_token':user_token
						};
						if(type != 'a'){
							//子论坛
							data['type'] = type;
						}
//						console.log(JSON.stringify(data))
						myAjax(
								'card/card/getList',
								'get',
								data, function(data) {
									console.log(JSON.stringify(data))
									if(data.success) {
										var lists = data.data;
										var len = lists.length;
										var html = '';
										var	list;
										$('.no' ).hide();
										if(len < 6){
											mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
											if(len == 0){
												var msg ='<img src="../../images/my/index/null.png" alt="暂无消息" class="nomsg">';
												$('.no' ).show();
												$('.no').html(msg);
												$('.nomsg').css({'marginTop':document.documentElement.clientHeight*0.25+'px','marginLeft':document.documentElement.clientWidth*0.5-161+'px'});
											}
										}
										for(var i = 0 ;i < len ;i++){
											list = lists[i];
											if(list.headimgurl.indexOf('http://') == -1 && list.headimgurl.indexOf('https://' == -1)){
												list.headimgurl = _baseUrl + list.headimgurl;
											}
											html +=
													'<div class="list" data-tab='+list.article_id+'>'+
													'<div class="top_body clear">'+
													'<div class="fl">'+
													'<img src='+list.headimgurl+' alt="用户头像">'+
													'</div>'+
													'<div class="fr">'+
													'<div class="name limit">'+list.nickname+'</div>'+
													'<span class="time">'+list.time_text+'</span>'+
													'</div>'+
													'</div>'+
													'<div class="bottom_body">'+
													'<div class="title limit">'+list.title+'</div>'+
													'<div class="content limit_">'+list.content+'</div>'+
													'<div class="imgs">';
											var imgs = list.list_img.thumbnail;
											if(imgs){
												var imglen = imgs.length;
												for(var j =0 ; j<imglen ;j++){
													html+=
															'<div class="img">'+
															'<img src='+ _baseUrl+imgs[j]+' alt="评论图" >'+
															'</div>';
												}
											}
											var good=list.like_status?'good_':'good';
											html+=
													'</div>'+
													'<div class="note clear">'+
													'<span class="fl">'+
													'<span class="type">#<span>'+list.interest+'</span>#</span>'+
													'</span>'+
													'<span class="fr msgnum">'+list.comments+'</span>'+
													'<span class="fr message"></span>'+
													'<span class="fr goodnum">'+list.likes+'</span>'+
													'<span class="fr isgood '+good+'"></span>'+
													'</div>';
											html+=
													'</div>'+
													'</div>';
										}
										$('.lists' ).append(html);
										$('.update_time').attr('update_time',data.update_time);
									} else {
										//mui.toast('加载失败');
									}
									todo();
								});
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
//					}, 1500);
				}
			},
			up: {
				height:50,
				contentrefresh:'正在加载...',
				contentnomore:'没有更多数据了~',
				callback :	function pullup(){
					console.log(1234)
					setTimeout(function() {
						var user_id = plus.storage.getItem('cg_user_id');
						var user_token = plus.storage.getItem('cg_user_token');
						var type = plus.storage.getItem('city_type');
						var update_time = $('.update_time').attr('update_time');
						var addlen;
						var data = {
//							'api_token': '8a2da8a2e00394f427caf215e90e0e71',
							'page_cnt': 3,
							'user_id':user_id,
							'user_token':user_token,
							'update_time':update_time
						};
						if(type!='a'){
							//子论坛
							data['type'] = type;
						}
						myAjax(
								'card/card/getList',
								'get',
								data, function(data) {
									if(data.success) {
										console.log(JSON.stringify(data))
										var lists = data.data;
										var len = lists.length;
										var html = '';
										var	list;
										for(var i = 0 ;i < len ;i++){
											list = lists[i];
											if(list.headimgurl.indexOf('http://') == -1 && list.headimgurl.indexOf('https://' == -1)){
												list.headimgurl = _baseUrl + list.headimgurl;
											}
											html +=
													'<div class="list" data-tab='+list.article_id+'>'+
													'<div class="top_body clear">'+
													'<div class="fl">'+
													'<img src='+list.headimgurl+' alt="用户头像">'+
													'</div>'+
													'<div class="fr">'+
													'<div class="name limit">'+list.nickname+'</div>'+
													'<span class="time">'+list.time_text+'</span>'+
													'</div>'+
													'</div>'+
													'<div class="bottom_body">'+
													'<div class="title limit">'+list.title+'</div>'+
													'<div class="content limit_">'+list.content+'</div>'+
													'<div class="imgs">';
											var imgs = list.list_img.thumbnail;
											if(imgs){
												var imglen = imgs.length;
												for(var j =0 ; j<imglen ;j++){
													html+=
															'<div class="img">'+
															'<img src='+ _baseUrl+imgs[j]+' alt="评论图" >'+
															'</div>';
												}
											}
											var good=list.like_status?'good_':'good';
											html+=
													'</div>'+
													'<div class="note clear">'+
													'<span class="fl">'+
													'<span class="type">#<span>'+list.interest+'</span>#</span>'+
													'</span>'+
													'<span class="fr msgnum">'+list.comments+'</span>'+
													'<span class="fr message"></span>'+
													'<span class="fr goodnum">'+list.likes+'</span>'+
													'<span class="fr isgood '+good+'"></span>'+
													'</div>';
											html+=
													'</div>'+
													'</div>';
										}
										$('.lists' ).append(html);
										$('.update_time').attr('update_time',data.update_time);
										mui('#pullrefresh').pullRefresh().endPullupToRefresh(( len < 3));
									} else {
										//mui.toast('加载失败');
									}
									todo();
								});
					}, 1500);
				}
			}
		}
	});
	mui.plusReady(function(){
		console.log(666)
		//关闭等待框
		plus.nativeUI.closeWaiting();
		//显示当前页面
		
		$('.no').css({'height':document.documentElement.clientHeight-130+'px'});
		
		mui.currentWebview.show('slide-in-right',200);
		var self = plus.webview.currentWebview();
		var types = self.type;
		var user_id = plus.storage.getItem('cg_user_id');
		var user_token = plus.storage.getItem('cg_user_token');
		var banner = document.getElementsByClassName('banner')[0];
		var lists = document.getElementsByClassName('lists')[0];
		var type = types[0];
		var url = types[1];
		var interest = types[2];
		var description = types[3];
		var html = '';
		plus.storage.removeItem('city_type');
		plus.storage.setItem('city_type',type);
		if(type=='a'){
			html ='<div class="list_" data-tab='+type+'>'+
				  '<img src="../../images/city/interest00@2x.png" alt="">'+
				  '</div>';
		}else{
			html =
					'<div class="list_" data-tab='+type+'>'+
					'<img src='+url+' alt="">'+
					'<div class="text">'+
					'<span class="interest">'+interest+'</span>'+
					'<span class="description">'+description+'</span>'+
					'</div>'+
					'</div>';
		}
		$(banner).append(html);
		var data = {
			'page_cnt': 6,
			'user_id':user_id,
			'user_token':user_token
		};
		if(type!='a'){
			//子论坛
			data['type'] = type;
		}
//		console.log(JSON.stringify(data));
		myAjax(
				'card/card/getList',
				'get',
				data,
				function(data) {
					console.log(JSON.stringify(data));
					if(data.success) {
						var lists = data.data;
						var len = lists.length;
						var html = '';
						var	list;
						if(len < 6){
							if(len == 0){
								var msg ='<img src="../../images/my/index/null.png" alt="暂无消息" class="nomsg">';
								$('.no' ).show();
								$('.no').html(msg);
								$('.nomsg').css({'marginTop':document.documentElement.clientHeight*0.25+'px','marginLeft':document.documentElement.clientWidth*0.5-161+'px'});
							}
						}
						for(var i = 0 ;i < len ;i++){
							list = lists[i];
							if(list.headimgurl.indexOf('http://') == -1 && list.headimgurl.indexOf('https://' == -1)){
								list.headimgurl = _baseUrl + list.headimgurl;
							}
							html +=
									'<div class="list" data-tab='+list.article_id+'>'+
									'<div class="top_body clear">'+
									'<div class="fl">'+
									'<img src='+list.headimgurl+' alt="用户头像">'+
									'</div>'+
									'<div class="fr">'+
									'<div class="name limit">'+list.nickname+'</div>'+
									'<span class="time">'+list.time_text+'</span>'+
									'</div>'+
									'</div>'+
									'<div class="bottom_body">'+
									'<div class="title limit">'+list.title+'</div>'+
									'<div class="content limit_">'+list.content+'</div>'+
									'<div class="imgs">';
							var imgs = list.list_img.thumbnail;
							if(imgs){
								var imglen = imgs.length;
								for(var l =0 ; l<imglen ;l++){
									html+=
											'<div class="img">'+
											'<img src="'+ _baseUrl+imgs[l]+'" alt="评论图" >'+
											'</div>';
									console.log(_baseUrl+imgs[l]);
								}

							}
							var good=list.like_status?'good_':'good';
							html+=
									'</div>'+
									'<div class="note clear">'+
									'<span class="fl">'+
									'<span class="type">#<span>'+list.interest+'</span>#</span>'+
									'</span>'+
									'<span class="fr msgnum">'+list.comments+'</span>'+
									'<span class="fr message"></span>'+
									'<span class="fr goodnum">'+list.likes+'</span>'+
									'<span class="fr isgood '+good+'"></span>'+
									'</div>';
							html+=
									'</div>'+
									'</div>';
						}
						$('.lists' ).append(html);
						$('.update_time').attr('update_time',data.update_time);
						//mui('#pullrefresh').pullRefresh().endPullupToRefresh(( len < 6));
					} else {
							//mui.toast('加载失败');
						}
					todo();
				});
		var lists_ =$('.lists');
		//点赞
		lists_.delegate('.isgood','tap',function(e){
			var this_ = this;
			e.detail.gesture.preventDefault(); //修复iOS 8.x
			var n = $(this_).prev().text();
			var article_id = $(this_).parents('.list' ).attr('data-tab');
			var like = $(this_ ).hasClass('good')?'set':'cancel';
			var url = 'card/card/'+ like +'Like';
			$(this_ ).toggleClass('good');
			$(this_ ).toggleClass('good_');
			$(this_ ).hasClass('good')?n--:n++;
			$(this_).prev().text(n);
			myAjax(
					url,
					'post', {
						//							'api_token': 'f85c8e3ffaa4b6924af2e1c21b6b81a0',
						'user_id':user_id,
						'user_token':user_token,
						'article_id':article_id
					}, function(data) {
						if(data.success) {

						} else {
							mui.toast('点赞失败');
						}
					});
		});
		lists_.delegate('.fl,.content,.name,.title,.imgs,.time,.msgnum,.message','tap',function(e){
				e.detail.gesture.preventDefault(); //修复iOS 8.x
				var this_ = this;
				var article_id = $(this_).parents('.list' ).attr('data-tab');
				mui.openWindow({
					url:'tribune_detail.html',
					id:'tribune_detail',
					extras:{
						article_id:article_id
					},
					show:{
						autoShow:false,
						aniShow:'slide-in-right',
						duration:200
					},
					waiting:{
						autoShow:true,
						title:'正在加载...'
					}
				})
			});

	});
	function todo(){
		setTimeout(function(){
			mui(".imgs img").each(function () {
				var this_ = this;
				var ih = this_.offsetHeight;
				var iw = this_.offsetWidth;
				if(ih == iw){
					this_.offsetHeight = '78px';
					this_.offsetWidth = '78px';
				}else if(ih > iw){
					this_.width = '78px';
					this.style.top = -this_.offsetHeight/2+78/2 + 'px';
				}else{
					this.style.height = '78px';
					this.style.left = -this_.offsetWidth/2+78/2 + 'px';
				}
			});
		},150);
		//ul显示
//		mui(".comments").each(function () {
//			var this_ = this;
//			var len = this_.getElementsByTagName('li' ).length;
//			console.log(len)
//			if( len == 0){
//				this_.style.display = 'none';
//			}
//		});
	}
	</script>
</body>
</html>